<template>
  <div class="management">
    <el-button type="primary" icon='el-icon-plus' @click="handleAdd" size="mini">上传</el-button>
    <el-link to="/downRecord1">
      <el-button type="primary" icon='el-icon-plus' size="mini">命令下发</el-button>
    </el-link>
    <div class="contant">
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
        :header-cell-style="{background:'#e5e5e5',color:'#000'}">

        <el-table-column prop="name" label="名称" />
        <el-table-column prop="remark" label="说明" />
        <el-table-column prop="url" label="文件名称" />
        <el-table-column prop="type" label="文件类型">
          <template slot-scope="scope">
            <span v-for="(item, index) in typeOptions" :key="index" :value="item.value" v-if="scope.row.type == item.value">{{ item.label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="version" label="版本号" />
        <el-table-column prop="filesize" label="文件大小" />
        <el-table-column prop="filesha256" label="文件SHA256" />
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="{row,$index}">
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>

    <el-dialog title="新增" :visible.sync="dialogVisible" width="640px" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" label-width="80px" size="small" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="addForm.name" clearable />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="addForm.remark" clearable />
        </el-form-item>
        <el-form-item label="类型">
          <!--<el-input  type="textarea" v-model="addForm.remark" clearable />-->
          <el-select v-model="addForm.type" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input type="input" v-model="addForm.version" clearable />
        </el-form-item>
        <el-form-item label="文件" required>
          <el-upload class="upload-demo" drag :multiple="false" ref="upload" :limit="1" accept="*" action="api/v1/file/save" :headers="headers" :data="addForm" :auto-upload="false" :on-success="onUploadSuccess"
            :on-error="onUploadError">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div style="text-align:right">
        <el-button type="primary" @click="submitUpload" size="small">保存</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import * as api from '@/api/link/file'

export default {
  comments: {},
  props: {},
  data() {
    return {
      typeOptions: [
        // 1 设备软件
        // 2 补丁
        // 3 初始化配置
        // 4 shell脚本
        // 5 组件公钥
        // 6 容器公钥
        // 7 应用公钥
        // 8 容器镜像包
        // 9 容器升级包
        // 10 应用文件
        // 11 终端升级包
        {
          value: '1',
          label: '设备软件'
        },
        {
          value: '2',
          label: '补丁'
        },
        {
          value: '3',
          label: '初始化配置'
        },
        {
          value: '4',
          label: 'shell脚本'
        },
        {
          value: '5',
          label: '组件公钥'
        },
        {
          value: '6',
          label: '容器公钥'
        },
        {
          value: '7',
          label: '应用公钥'
        },
        {
          value: '8',
          label: '容器镜像包'
        },
        {
          value: '9',
          label: '容器升级包'
        },
        {
          value: '10',
          label: '应用文件'
        },
        {
          value: '11',
          label: '终端升级包'
        }
      ],
      headers: {
        'Authorization': getToken()
      },
      dialogVisible: false,
      multipleSelection: [],
      tableData: [],
      addForm: {},
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
    }
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
      return curHeight - 280
    }
  },
  created() {
    this.getPageList()
  },
  mounted() {
  },
  methods: {
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getPageList() {
      this.search()
    },
    search() {
      const p = Object.assign({}, this.pagination)
      api.page(p).then(resp => {
        this.tableData = resp.data.list
        this.pagination = resp.data.pagination
        this.pagination.page = resp.data.pagination.current
      })
    },
    handleAdd() {
      this.dialogVisible = true
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    onUploadSuccess(f) {
      this.dialogVisible = false;
      if (f.code === 200) {
        this.$message({
          message: f.message,
          type: 'success'
        });
        this.getPageList();
      } else {
        this.$message({
          message: f.message,
          type: 'error'
        });
      }
    },
    onUploadError() {
      this.$message({
        message: '文件上传失败',
        type: 'warning'
      });
      return;
    },
  },
}
</script>

<style scoped lang="scss">
.management {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
